import React, {Component} from 'react'
import { Form, Input, Button } from 'antd';
import { connect } from 'react-redux'
import { doLoginAsync } from '../../store/user/actionCreators.js'
const mapStateToProps = (state)=>{
  return {
    
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    doLogin: (params)=>{
      dispatch(doLoginAsync(params))
    }
  }
}
@connect(mapStateToProps, mapDispatchToProps)
class Login extends Component{
  render(){
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    };
    return (
      <div>
         <Form
              {...layout}
              name="basic"
              onFinish={this.login}   
            >
              <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true, message: '请输入用户名!' }]}
              >
                <Input />
              </Form.Item>
        
              <Form.Item
                label="密码"
                name="pwd"
                rules={[{ required: true, message: '请输入密码!' }]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </Form>
      </div>
    )
  }
  login = (value)=>{
    
    this.props.doLogin(value)
  }
} 

export default Login